<template>
	<view class="page">
		<view class="qg">
			<view class="active qg_item">本地</view>
			<view class="qg_item" @click="toQg()">全国</view>
		</view>
		<!-- <haibao ref="haibao"></haibao> -->
		<view class="title_fx">产业链分布地图</view>
		<view class="" style="margin: 10px;">
			<chainMap ref="chainMap" :chain_id='id'></chainMap>
		</view>
		<view class="title_fx">产业链图谱</view>
		<chainFx ref="chainFx" @showList='showList' @lian='lian' ></chainFx>
		
		<view class="flex_chain">
			<view class="chain_h">强链</view>
			<view class="chain_name">
				<view class='' v-for="(item,index) in nodeQiang" :key="index" @click="showList(item,'quan')">{{item.chain_name}} <text class="" v-show="index+1<nodeQiang.length">{{' , '}}</text></view><view v-if='nodeQiang.length==0'>无</view>
			</view>
		</view>
		<view class="flex_chain">
			<view class="chain_h">补链</view>
			<view class="chain_name">
				<view class='' v-for="(item,index) in nodeBu" :key="index" @click="showList(item,'quan')">{{item.chain_name}} <text class="" v-show="index+1<nodeBu.length">{{' , '}}</text></view><view v-if='nodeBu.length==0'>无</view>
			</view>
		</view>
		<view class="flex_chain">
			<view class="chain_h">延链</view>
			<view class="chain_name">
				<view class='' v-for="(item,index) in nodeYan" :key="index" @click="showList(item,'quan')">{{item.chain_name}} <text class="" v-show="index+1<nodeYan.length">{{' , '}}</text></view><view v-if='nodeYan.length==0'>无</view>
			</view>
		</view>
		
		<view style="height: 30px;width: 100%;" ></view>
		<view class="title_fx" v-if="cityItem.type!=3">
			<view class="">
				各区域产业链相关企业分布
			</view>
		</view>
		<view class="top" v-if="cityItem.type!=3">
			<view class="top_item" v-show="cityItem.shengShow" :class="index_add==0?'active':''" @click="index_add=0">省份</view>
			<view class="top_item" v-show="cityItem.shiShow" :class="index_add==1?'active':''" @click="index_add=1">城市</view>
			<view class="top_item" v-show="cityItem.quShow" :class="index_add==2?'active':''" @click="index_add=2">区县</view>
			<view class="top_item" :class="index_add==3?'active':''" @click="index_add=3">园区</view>
		</view>
		<view class="flex_table" >
			<view class="w15 bg_blue">排名</view>
			<view class="w30 bg_blue">{{index_add == 0?'省份':index_add == 1?'城市':index_add == 2?'区县':'园区'}}</view>
			<view class="w30 bg_blue">企业数</view>
			<view class="w25 bg_blue">操作</view>
		</view>
		<view class="" >
			<view class="flex_table" v-for="(item,index) in  index_add == 0?shengCList:index_add == 1?shiCList:index_add == 2?quCList:parkCList" :key='item.id'>
				<view class="w15">{{index+1}}</view>
				<view class="w30">{{index_add == 3?item.park_name:item.city_name}}</view>
				<view class="w30">{{index_add == 3?item.company_num:item.total}}</view>
				<view class="w25 blue" @click="showList({id:item.id,city_id:item.city_id,city_name:item.city_name,park_name:item.park_name})">企业名录</view>
			</view>
			<view class="" style="text-align: center;" v-if="(index_add == 0&&shengCList.length==0)||(index_add == 1&&shiCList.length==0)||(index_add == 2&&quCList.length==0)||(index_add == 3&&parkCList.length==0)">
				暂无数据
			</view>
		</view>
		
		<drawer ref="showRight" :width='300' @close='isshow=false' @touchmove.stop.prevent="()=>{}">
			<listPage height='100%' :isSmall='true' type_name='company' :list='companyList' :total='total_c' @getMore='getMore1'>
				<endlist :isLoad='isLoad' :isfinsh='isfinsh1' :length='companyList.length'></endlist>
			</listPage>
		</drawer>
		
		<!-- <view style="height: 20px;width: 100%;"></view>
		<view class="title_fx" v-if="repList.length>0">
			<view class="">产业链报告</view>
		</view>
		<scroll-view scroll-y="true" style="height: 400px;" v-if="repList.length>0">
			<view class="item_i" v-for="item in repList" :key='item.id'>
				<view class="title_p">{{item.title}}</view>
				<view class="" style="color:#007AFF;font-size: 12px;" @click="down(item.urls)">下载/预览</view>
			</view>
		</scroll-view> 
		 -->
		<view class="bottom_list">
			<view class='flex type_div'>
				<view @click="changeType(item)" class="listType" :class="type_name==item.id?'active_item':''" v-for="(item,index) in listType" :key="index">{{item.name}}</view>
			</view>
			<listPage :type_name='type_name' :list='list' :total='total' @getMore='getMore'>
				<endlist :isLoad='isLoad' :isfinsh='isfinsh' :length='list.length'></endlist>
			</listPage>
		</view>
	</view>
</template>

<script>
	import listPage from '@/components/listPage.vue'
	import endlist from '@/components/endlist.vue'
	import chainFx from '@/components/chainFx.vue'
	import chainMap from '@/components/chainMap.vue'
	import open from '@/components/open/open.vue'
	import {getChainDataNum,GetReportList,chain_city_map,localprojects,compayorparknumonareamap,CompayOrParkNumOnCityMap,myIndustrychain ,parklist ,GetSuCitysList,gz,companylist,ShareAdd ,policy,GetOwnChainDetailById,CreateOrder} from '../../utils/api.js'
	import drawer from '@/components/drawer/drawer.vue'
	export default {
		data() {
			return {
				data:{},
				isXzt:true,
				chainData:{},
				parkList_tj:[],
				cityList:[{juli:''}],
				cityList1:[{juli:''}],
				isSc:false,
				companyList_tj:[],
				active:1,
				active1:1,
				type:[
					{name:'推荐城市',id:1},
					{name:'推荐区县',id:2},
					{name:'推荐园区',id:3},
				],
				type1:[],
				pList:[],
				isOpen:false,
				quan:false,
				bottom_iphone:uni.getStorageSync('bottom')||false,
				nodeQiang:[{chain_name:''}],
				nodeBu:[{chain_name:''}],
				nodeYan:[{chain_name:''}],
				nodeListAll:[],
				nodeList1:[],
				nodeList2:[],
				isfinsh1:false,
				isLoading:false,
				companyList:[],
				isshow:false,
				page:1,
				item:{},
				chain_detail:{},
				zyIndex:0,
				userinfo:{},
				shiCList:[],
				parkCList:[],
				shengCList:[],
				quCList:[],
				proList:[],
				index_add:1,
				cityItem:uni.getStorageSync('myCity'),
				chain_id:'',
				id:'',
				repList:[],
				city_id:uni.getStorageSync('myCity').id,
				type_name:'park',
				listType:[
					{name:'园区',id:'park'},
					{name:'政策',id:'policy'},
					{name:'项目',id:'project'},
				],
				isLoad:false,
				isfinsh:false,
				total:'',
				total_c:'',
				list:[],
				pagelist:1
			}
		},
		components:{chainFx,open,drawer,chainMap,listPage,endlist},
		onLoad(option){
			this.chainData=JSON.parse(option.chain)
			this.id = JSON.parse(option.chain).id || option.scene
			this.chain_id = JSON.parse(option.chain).chain_id
			
			GetReportList({yun_chain_id:this.chain_id}).then(res=>{
				this.repList = res.data.data
			})
			
			uni.setNavigationBarTitle({
				title:this.chainData.chain_name
			})
			
			this.init()
			
			
			this.getComS()
			this.getComShi()
			this.getComQu()
			this.getComPark()
		},
		onShow(){
			this.userinfo = JSON.parse(uni.getStorageSync('userinfo'))
		},
		onShareTimeline() {
			ShareAdd({identification:this.chainData.id,type:4,name:this.chainData.chain_name})
			return {
				title: this.chainData.chain_name+' | 投资钟祥',
			}
		},
		onShareAppMessage() {
			ShareAdd({identification:this.chainData.id,type:4,name:this.chainData.chain_name})
			return {
				title: this.chainData.chain_name+' | 投资钟祥',
			}
		},
		mounted() {
			this.changeCity(uni.getStorageSync('myCity'))
			this.getList()
		},
		methods: {
			toQg(){
				if(!uni.getStorageSync('xm_token')){
					uni.navigateTo({
						url:'/pages/login/login?type=产业链全国招商地图&page=chainDetail_qg&chain='+JSON.stringify(this.chainData)
					})
					return
				}
				uni.redirectTo({
					url:'/pages/chainDetail_qg/chainDetail_qg?chain='+JSON.stringify(this.chainData)
				})
			},
			changeType(e){
				this.type_name = e.id
				this.pagelist = 1
				this.list = []
				this.isfinsh = false
				this.getList()
			},
			getMore(){
				this.pagelist += 1
				this.getList()
			},
			getList(){
				if(this.isfinsh){
					return
				}
				let data = {
					city_id:uni.getStorageSync('myCity').id,
					page:this.pagelist,
					lat:uni.getStorageSync('lat'),
					lng:uni.getStorageSync('lng'),
					chain_id:this.id
				}
				this.isLoad = true
				let api = this.type_name== 'park'?parklist(data):
									this.type_name == 'project'?localprojects.getList(data):
									this.type_name == 'policy'?policy.getList(data):
									this.type_name == 'company'?companylist(data):''
				api.then(res=>{
					this.list.push(...res.data.data)
					this.total = res.data.total
					this.isLoad = false
					if(res.data.last_page == this.pagelist){
						this.isfinsh = true
					}
				})
			},
			lian(data){
				this.nodeQiang = data.qiang
				this.nodeBu = data.bu
				this.nodeYan = data.yan
			},
			imageError(e,index){
				this.companyList_tj[index].logo='https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/8/companyLogo.png'
			},
			changeCity(item){
				if(!item.id){
					item.id = 1
				}
				this.cityItem = item
				if(this.cityItem.shengShow){
					this.index_add=0
				}else if(this.cityItem.type==1){
					this.cityItem.shiShow = true
					this.cityItem.quShow = true
					this.index_add=1
				}else if(this.cityItem.type==2){
					this.cityItem.quShow = true
					this.index_add=2
				}else if(this.cityItem.type==3){
					this.index_add=3
				}
				// this.getComS()
				this.getComShi()
				this.getComQu()
				this.getComPark()
			},
			getComS(){
				uni.showLoading({
					title:'正在加载'
				})
				chain_city_map({city_id:1,chain_id:this.chainData.id}).then(res=>{
				  this.shengCList = res.data.sort((a,b)=>{
						return b.total - a.total
					})
					this.alltotal=0
					this.shengCList.forEach(res=>{
						this.alltotal += res.total
					})
					uni.hideLoading()
				})
			},
			getComPark(){
				this.parkCList=[]
				parklist({city_id:this.cityItem.id,chain_id:this.chainData.id,order:'company_num'}).then(res=>{
					res.data.data.forEach(item=>{
						if(item.company_num!=0){
							this.parkCList.push(item)
						}
					})
				})
			},
			getComShi(){
				CompayOrParkNumOnCityMap({city_id:this.cityItem.id,chain_id:this.chainData.id}).then(res=>{
				  this.shiCList =res.data.slice(0, 20)
				})
			},
			getComQu(){
				chain_city_map({city_id:this.cityItem.id,chain_id:this.chainData.id}).then(res=>{
					this.quCList = res.data.sort((a,b)=>{
						return b.total - a.total
					})
				// compayorparknumonareamap({city_id:this.cityItem.id,chain_id:this.chainData.id}).then(res=>{
				  // this.quCList =res.data.slice(0, 20)
				})
			},
			toPage(page){
				uni.navigateTo({
					url:`/pages/${page}/${page}`
				})
			},
			showList(item,type){
				this.isshow=true
				this.quan = type=='quan'?true:false
				this.companyList=[]
				this.$refs.showRight.show()
				this.isfinsh1 = false
				this.page = 1
				this.item = item
				this.getCList()
			},
			getMore1(){
				this.page += 1
				this.getCList()
			},
			getCList(){
				if(this.isfinsh1){
					return
				}
				this.isLoading = true
				let data = {
					chain_id:this.item.chain_name?this.item.id:this.id,
					page:this.page,
					city_id: this.quan?1:(!this.item.chain_name&&!this.item.park_name)?(this.item.city_id || this.item.id):this.item.park_name?'':this.cityItem.id,
					park_id:this.item.park_name?this.item.id:''
				}
				companylist(data).then(res=>{
					if(this.page==1){
						this.companyList = res.data.data
					}else{
						this.companyList = this.companyList.concat(res.data.data)
					}
					if(this.companyList.length == res.data.total){
						this.isfinsh1 = true
					}
					this.total_c = res.data.total
					this.isLoading = false
				})
			},
			open(){
				this.$refs.open.show()
			},
			init(){
				this.$refs.chainFx.init(this.chainData)
			},
			down(url){
				if(!url){
					uni.showToast({
						title:'报告数据缺失',
						icon:'none'
					})
					return
				}
				uni.getSystemInfo({
					success: (res) => {
						if (res.system.includes('iOS')) {
							uni.navigateTo({
								url:`/pages/pdfYl/pdfYl?src=${url}`
							})
						} else {
							uni.showLoading({
								title:'下载中'
							})
							uni.downloadFile({
								url: url,
								success: (res) => {
									const path = res.tempFilePath;
									uni.openDocument({
										filePath: path,
										fileType: 'pdf',
										success: (res) => {
											uni.hideLoading()
										},
										fail: (err) => {
											uni.hideLoading()
											uni.showToast({
												title: '打开文件失败',
												icon: 'none',
												duration: 2000
											});
										}
									});
								},
								fail: (err) => {
									console.log(err);
									uni.hideLoading()
									uni.showToast({
										title: '下载文件失败',
										icon: 'none',
										duration: 2000
									});
								}
							});
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
page,.page{
	width: 100%;
	height: 100%;
}
.flex_chain{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 10px;
	margin: 10px 0;
	border-radius: 8px;
	box-shadow: 0 2px 6px 0 rgba($color: #000000, $alpha: .15);
	font-size: 14px;
	width: calc(100% - 40px);
	margin-left: 10px;
	.chain_h{
		width: 40px;
		font-size: 14px;
		font-weight: 800;
		color: #333;
		text-align: center;
	}
	.chain_name{
		display: flex;
		width: calc(100% - 60px);
		flex-wrap: wrap;
		view{
			margin: 5px;
			color: #666;
		}
	}
}
	.open{
		height: 100px !important;
		min-height: 100px !important;
		overflow: hidden !important;
		position: relative !important;
		margin-bottom: 40px;
	}
	.toopen{
		position: absolute;
		bottom: 0;
		height: 60px;
		line-height: 80px;
		text-align: center;
		width: calc(100% - 10px);
		z-index: 10;
		background: linear-gradient(0deg, rgba(255,255,255,1) 0,rgba(255,255,255,0) 100%);
	}
	.header_2wm{
		width: 60rpx;
		height: 60rpx;
		background-image: url(https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/2wm.png);
		background-size: 100% 100%;
	}
	.qg{
		display: flex;
		.qg_item{
			width: 50%;
			text-align: center;
			height: 40px;
			line-height: 40px;
			font-size: 18px;
			border-bottom: 1px solid #f0f0f0;
		}
		.active{
			color: rgba(10, 169, 255, 1.0);
			font-weight: 900;
		}
	}
	.zc_item{
		background: #FFFFFF;
		box-shadow: 0px 2px 2px 2px rgba(191, 191, 191, 1);
		border-radius: 6px;
		padding: 14px 12px;
		margin: 10px 5px;
		width: calc(100% - 34px);
		.zc_t{
			font-size: 16px;
			font-weight: 500;
			color: #333333;
			margin-bottom: 10px;
		}
	}
	.zc_flex{
		display: flex;
		justify-content: space-between;
		.bq{
			background: #FF5100;
			box-shadow: 0px 1px 10px 0px rgba(71, 88, 191, 0.12);
			border-radius: 6px;
			padding: 2px 5px 3px;
			color: #fff;
			font-size: 14px;
		}
		.time{
			font-size: 14px;
			font-weight: 400;
			color: #999999;
		}
	}
	.map{
		width: calc(100% - 14px);
		height: 380px;
	}
.title_fx{
	font-size: 18px;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 800;
	color: #333333;
	padding: 5px;
	// margin: 20px 0 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.more{
		color: #888;
		font-size: 14px;
	}
}
.none{
	text-align: center;
	margin-top: 150px;
	font-size: 22px;
	font-weight: 800;
}
.section-main{
  position: relative;
  overflow: auto;
  max-width: 100%;
  padding: 5px;
  min-height: 300px;
	transition: all 0.5s;
  // box-shadow: inset 0 0 10px 0 rgba(75,126,250,.9);
  // height: calc(100% - 1px);
}
.section-main::-webkit-scrollbar {
  width: 10px;
  background-color: rgba(36, 71, 143, 1);
}
.section-main::-webkit-scrollbar-thumb {
  background-color: rgba(3, 168, 226, 1)
}
.section{
  display: flex;
  margin-bottom: 20px;
}
.section-level{
    position: relative;
    min-width: 60px;
    max-width: 60px;
    font-size:12px;	
    // color: rgb(41, 151, 255);
    color: #fff;
    // background: rgba(0,145,255,.7);
    // background: rgba(252, 180, 14, 0.5);
		background:rgba($color: #0088cc, $alpha:1) !important;

    text-align: center;
    padding: 5px;
    word-break: break-all;
    border-radius: 10px 0 0 10px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    line-height: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.section-level:hover{
    color: #ff9933;
}
.section-content{
    margin-left: 5px;
    .node{
        float: left;
        cursor: pointer;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 5px 5px;
        width: 125px;
        height: 26px;
        line-height: 26px;
        font-size: 12px;
        text-align: center;
        // border: 1px solid #0091ff;
        // border: 1px solid #f93;
				border: 1px solid #0090DA;
        border-radius: 4px;
        overflow: hidden;
        // color: #0091ff;
        color: #fff;
    }
		.a:hover{
         color: #fff;
		 }
		 .color3{
			 // color: #888;
			 background:rgba($color: #b3b1b1, $alpha:1) !important;
		 }
		 .level1>.color2{
			 background:rgba($color: #0088cc, $alpha:1) !important;
		 }
		 .none>.a{
			 background:rgba($color: #63cbff, $alpha:1) !important;
		 }
		 .level1>.node{
			 border: none;
			 border-radius: 0;
			 margin: 0;
			 // margin: 5px 8px;
		 }
		 .level1>.wus{
			 background:rgba($color: #f93, $alpha:0.9) !important;
		 }
    .has-children{
      width: auto;
      height: auto;
      max-width: 125px;
    }
		.has-grandchild>.wus{
			border: 1px solid #f93;
			margin: 5px 5px;
		}
		.has-grandchild>.yans{
			margin: 5px 5px;
		}
    .has-grandchild{
      width: auto;
      height: auto;
    }
}
.red{
  color:#fff;
}
.red1{
  color:rgb(246, 203, 12);
}
.companyList{
  margin: 5px;
  border: 2px solid #ccc;
  border-radius: 5px;
  background: #f3f4fb;
  .header{
    margin: 5px;
    font-size: 18px;
    font-weight: 600;
  }
  .chain_view{
    border: 2px solid #ccc;
    border-radius: 5px;
    margin: 5px;
    padding: 5px 0;
    .flex{
      display: flex;
      align-items: center;
      font-size: 13px !important;
    }
    .l-item{
      margin: 5px 0;
      .blue{
        color: #f93;
        min-width: 40px;
      }
    }
    img{
      width:18px;
      margin: 5px 5px 5px 10px;
    }
  }
}


.item{
	background: #FFFFFF;
	box-shadow: 0px 2px 2px 2px rgba(191, 191, 191, 1);
	border-radius: 6px;
	padding: 14px 12px;
	margin: 10px 5px;
	width: calc(100% - 34px);
	display: flex;
	position: relative;
	.score{
		position: absolute;
		right: 16px;
		font-size: 22px;
		color: #f93;
	}
	image{
		width: 36px;
		height: 36px;
		margin-right: 8px;
	}
	.name1{
		width: 70%;
	}
	.name2{
		width: 100%;
	}
	.name{
		font-size: 15px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 700;
		color: #111;
		line-height: 21px;
	}
	.info{
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 17px;
	}
}
.bottom{
	position: fixed;
	justify-content: space-around;
	align-items: center;
	bottom: 0;
	width: calc(100% - 20px);
	padding: 0 10px;
	height: 54px;
	background: #FFFFFF;
	display: flex;
	z-index: 100;
	box-shadow: 0px -2px 2px #e7e7e7;
	.btn{
		font-size: 18px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		height: 54px;
		line-height: 54px;
		background: linear-gradient(90deg, #FE8E33 0%, #FC5517 100%);
		// border-radius: 23px;
		width: 180px;
	}
	.sc{
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		text-align: center;	
		// width: ;
		image{
			width: 24px;
			height: 24px;
		}
	}
}
.top{
	width: 100%;
	display: flex;
	justify-content: space-around;
	// margin-bottom: 20px;
	.top_item{
		width: 20%;
		padding: 6px 0;
		text-align: center;
		font-size: 14px;
	}
	.active{
		color: #f93;
		border-bottom: 2px solid #f93;
	}
}
.box_item{
	width: calc(100% - 44px);
	margin: 10px 10px;
	background: #FFFFFF;
	box-shadow: 0px 2px 2px 2px rgba(191, 191, 191, 1);
	border-radius: 6px;
	display: flex;
	padding: 12px;
	position: relative;
	image{
		width: 36px;
		height: 36px;
		margin-right: 8px;
	}
	.score{
		position: absolute;
		right: 16px;
		font-size: 22px;
		color: #f93;
	}
	.name1{
		width: calc(100% - 30px);
	}
	.name{
		font-size: 15px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 800;
		color: #111;
		line-height: 21px;
	}
	.info{
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 17px;
	}
}
	.nomore{
		height: 60px;
		line-height: 60px;
		text-align: center;
		color: #888;
	}
	.loading{
		width: 100%;
		height: 60px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		color: #888;
		image{
			width: 32px;
			height: 32px;
			margin-right: 10px;
			animation: zhuan 1.2s linear infinite;
		}
	}
	@keyframes zhuan {
		0% {
			transform: rotate(0deg);
		}
		50% {
			transform: rotate(180deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
	.zs_map{
		width: calc(100% - 20px);
		margin-left: 10px;
		position: relative;
		image{
			width: 100%;
		}
		.toopen1{
			position: absolute;
			bottom: 0;
			height: 100%;
			display: flex;
			align-items: center;
			text-align: center;
			width: 100%;
			font-size: 22px;
			font-weight: 800;
			color: #ff8913;
			justify-content: center;
			z-index: 101;
			background-color: rgba($color: #000000, $alpha: .5);
		}
	}
	.mask_zs { 
		filter: blur(6px); 
	}
	.zs{
	}
	.swiper1{
		width: 100%;
		height: 180px;
		margin-bottom: 20px;
		.swiper_item1{
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.small{
			width:calc(100% - 40px);
			height: 130px;
			transition: all 0.5s;
			background-color: rgba($color: #000000, $alpha: .3);
			box-shadow: 0px 0px 12px 0 rgba($color: #000000, $alpha: .3);
		}
		.big{
			width: calc(100% - 8px);
			height: 170px;
			// margin: auto;
			box-shadow: 0px 0px 12px 0 rgba($color: #000000, $alpha: .3);
		}
	}
.flex_table{
		display: flex;
		padding: 10px;
		// width:calc(100% - );
		font-size: 14px;
		text-align: center;
	}
	.w15{
		width: 15%;
	}
	.w25{
		width: 25%;
	}
	.w10{
		width: 10%;
	}
	.w30{
		width: 30%;
	}
	.w40{
		width: 40%;
	}
	.w45{
		width: 45%;
	}
	.w35{
		width: 45%;
	}
	.big{
		font-weight: 800;
	}
	.blue{
		color: #007AFF;
	}
	.bg_blue{
		background-color: #007AFF;
		color: #fff;
		font-weight: 800;
		padding: 10px 0;
	}
	.item_i{
		width: calc(100% - 20px);
		padding: 15px 10px;
		border-bottom: 1px solid #E5E5E5;
		display: flex;
		justify-content: space-between;
		.title_p{
			width: calc(100% - 60px);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 14px;
			color: #333;
		}
	}
	// .mask_zs::before { content: ""; position: absolute; filter: blur(6px); height: 100%; width: 100%; top: 0; left: 0;}

// #ifndef APP-PLUS
.bottom_list{
	height: calc(100% - 180px);
	margin-top: 40px;
}
// #endif
.index_list{
	height: calc(100% - 50px);
	position: relative;
}
.type_div{
	background-color: #fff;
}
.listType{
	width: 25%;
	text-align: center;
	height: 50px;
	line-height: 50px;
	background: #fff;
}
.active_item{
	font-size: 18px;
	position: relative;
	font-weight: bold;
	&::before{
		content: ' ';
		position: absolute;
		bottom: 4px;
		height: 3px;
		width: 60px;
		background-color: #0091FF;
		border-radius: 3rpx;
		left: 50%;
		transform: translateX(-50%);
	}
}

.list_item{
	width: calc(100% - 30px);
	// min-height: 100px;
	padding: 10px;
	border-radius: 8px;
	box-shadow: 0px 1px 10px 0px #0A477519;
	margin: 20px 5px;
	position: relative;

	.img{
		width: 120px;
		height: 90px;
		border-radius: 6px;
		overflow: hidden;
		position: relative;
		box-shadow: 0 0 5px 0 rgba(0, 0,0, 0.1);
		.logo_name{
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			background: #0091FF;
			color: #fff;
		}
		image{
			width: 100%;
			height: 100%;
		}
		.img_level{
			position: absolute;
			top: 6px;
			left: 0px;
			padding: 2px 8px;
			border-radius: 4px;
			background: linear-gradient(135deg,#0091FF33,#0091FF);
			font-size: 12px;
			color: #fff;
		}
	}
	.right_div{
		width: calc(100% - 130px);
		.r_title{
			font-size: 16px;
			color: #333;
		}
	}
	.chain_view{
		background-color: #ECF3FF;
		color: #3D7CE2;
		padding: 0 4px;
		height: 16px;
		line-height: 16px;
		border-radius: 2px;
		font-size: 12px;
		margin: 8px 5px 0 0;
		display: inline-block;
	}
	.add_view{
		display: flex;
		font-size: 12px;
		margin-top: 6px;
		color:#999;
		image{
			max-width: 14px;
			min-width: 14px;
			height: 14px;
			margin-right: 6px;
			margin-top: 1px;
		}
	}
	.color_red{
		color: #f1340e;
	}
	.div100{
		width: 100%;
	}
}


</style>
